<template>
    <!-- 密码修改 -->
    <div>
        <!-- 修改 -->
        <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="ruleForm"
            label-width="200px"
        >
            <el-form-item label="原密码" prop="oldpass">
                <el-input
                    class="input"
                    :type="oldpassT ? 'text' : 'password'"
                    placeholder="请输入密码"
                    v-model="ruleForm.oldpass"
                    autocomplete="off"
                ></el-input>
                <span
                    class="item-icon iconfont"
                    :class="oldpassT ? 'iconyanjing-xianxing3-0' : 'iconbiyanjing'"
                    @click="oldpassT = !oldpassT"
                ></span>
            </el-form-item>
            <el-form-item label="新密码" prop="newpass">
                <el-input
                    class="input"
                    :type="passwordT ? 'text' : 'password'"
                    placeholder="请输入新密码"
                    v-model="ruleForm.newpass"
                    autocomplete="off"
                ></el-input>
                <span
                    class="item-icon iconfont"
                    :class="passwordT ? 'iconyanjing-xianxing3-0' : 'iconbiyanjing'"
                    @click="passwordT = !passwordT"
                ></span>
            </el-form-item>
            <el-form-item label="确认密码" prop="newpass2">
                <el-input
                    class="input"
                    :type="password2T ? 'text' : 'password'"
                    placeholder="请再次输入新密码"
                    v-model="ruleForm.newpass2"
                    autocomplete="off"
                ></el-input>
                <span
                    class="item-icon iconfont"
                    :class="password2T ? 'iconyanjing-xianxing3-0' : 'iconbiyanjing'"
                    @click="password2T = !password2T"
                ></span>
            </el-form-item>
            <el-form-item>
                <el-button class="button" type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

import { changepwdV1 } from '@/assets/api/userCenterApi.js'

export default {
    name: 'passwordEdit',
    components: {},
    props: {},
    data() {
        return {
            oldpassT: false, //是否显示密码
            passwordT: false, //是否显示密码
            password2T: false, //是否显示密码
            ruleForm: {
                oldpass: '',
                newpass: '',
                newpass2: '',
            },
            rules: {
                oldpass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                newpass: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
                newpass2: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }],
            },
        }
    },

    watch: {},
    created() {},
    mounted() {},
    computed: {
        ...mapState('common', {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        ...mapActions('common', ['getUserInfo']),

        async submitForm() {
            if (this.ruleForm.oldpass == '') {
                this.$message({
                    message: '请输入旧密码',
                    type: 'info',
                })
                return
            } else if (this.ruleForm.newpass == '') {
                this.$message({
                    message: '请输入新密码',
                    type: 'info',
                })
                return
            } else if (this.ruleForm.newpass2 == '') {
                this.$message({
                    message: '请再次输入新密码',
                    type: 'info',
                })
                return
            } else if (this.ruleForm.newpass != this.ruleForm.newpass2) {
                this.$message({
                    message: '两次密码输入不一致',
                    type: 'info',
                })
                return
            }
            var params = this.ruleForm
            console.log('修改密码的参数', params)
            let res = await changepwdV1(params)
            console.log('修改密码', res)
            if (res.code == 1) {
                this.$message({
                    message: res.msg,
                    type: 'success',
                })
                this.ruleForm.oldpass = ''
                this.ruleForm.newpass = ''
                this.ruleForm.newpass2 = ''
                if (res.code == 1) {
                    //更新vuex中的userinfo
                    this.getUserInfo()
                }
            }
        },
    },
}
</script>
<style lang="scss" scoped>
@import url('@/assets/static/iconfont.css');
@import url('@/assets/static/reset.css');
// 修改密码
.ruleForm {
    // margin-top: 30px;
    margin-left: 20px;
    padding: 30px;
    background-color: #fff;

    .input {
        width: 335px;
        height: 45px;
    }
    .button {
        margin-left: 85px;
        width: 183px;
        height: 47px;
        background: #1c87f3;
        border-radius: 82px;
    }
    .item-icon {
        position: absolute;
        top: 0;
        right: 378px;
    }
}
</style>
